<template>
    <div class="Addparkingposion">
        <Addtitle>添加月卡</Addtitle>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <div class="massgetion">
                <div class="top">
                    <div class="massageleft">
                        <el-form-item label="社区名称" prop="name" class="commoninput">
                            <el-input v-model="ruleForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="业主姓名" prop="name" class="commoninput">
                            <el-input v-model="ruleForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="身份证号" prop="name" class="commoninput">
                            <el-input v-model="ruleForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="活动时间" required class="datainput">
                            <el-col :span="11">
                            <el-form-item prop="date1" class="startdata">
                                <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
                            </el-form-item>
                            </el-col>
                            <el-col class="line" :span="2">-</el-col>
                            <el-col :span="11">
                            <el-form-item prop="date2" class="startdata">
                                <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
                            </el-form-item>
                            </el-col>
                        </el-form-item>
                    </div>
                    <div class="massageleft">
                        <el-form-item label="车库名称" prop="region" class="commoninput">
                            <el-select v-model="ruleForm.region" placeholder="请选择车库名称">
                            <el-option label="车库一" value="shanghai"></el-option>
                            <el-option label="车库二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                       <el-form-item label="手机号" prop="name" class="commoninput">
                            <el-input v-model="ruleForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="收费标准" prop="region" class="commoninput">
                            <el-select v-model="ruleForm.region" placeholder="请选择车库名称">
                            <el-option label="车库一" value="shanghai"></el-option>
                            <el-option label="车库二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="活动时间" required class="datainput">
                            <el-col :span="11">
                            <el-form-item prop="date1" class="startdata">
                                <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
                            </el-form-item>
                            </el-col>
                            <el-col class="line" :span="2">-</el-col>
                            <el-col :span="11">
                            <el-form-item prop="date2" class="startdata">
                                <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
                            </el-form-item>
                            </el-col>
                        </el-form-item>
                    </div>
                </div>
                <div class="bottom">
                    <el-form-item label="备注" prop="desc" class="commoninput">
                        <el-input type="textarea" v-model="ruleForm.desc" placeholder="请输入备注信息" maxlength="300"
                                    show-word-limit></el-input>
                    </el-form-item>
                </div>
            </div>
            <div class="buttonbox">
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')" class="savebutton">保存</el-button>
                    <el-button @click="resetForm('ruleForm')" class="reasetbutton">重置</el-button>
                </el-form-item>
            </div>
        </el-form>
    </div>
</template>

<script>
import Addtitle from '../components/Addtitle.vue'
export default {
    components:{
        Addtitle
    },
     data() {
      return {
        ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          ],
          resource: [
            { required: true, message: '请选择活动资源', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
}
</script>

<style lang="scss" scoped>
    .Addparkingposion{
        width: 1260px;  /* 最大1265px */ 
        margin: auto;
        height: 80vh;
        overflow: scroll;
        scrollbar-width: none;
        background-color: #fff;
        border: 1px solid rgba(233, 233, 233, 1);
        .massgetion{
            padding: 20px 40px;
            padding-right: 60px;
            .top{
                display: flex;
                justify-content: space-between;
            }
            .bottom{
                width: 100%;
                .commoninput{
                    ::v-deep .el-form-item__label{
                        width: 120px !important;
                    }
                    ::v-deep .el-form-item__content{
                        margin-left: 120px !important;
                    }
                    ::v-deep .el-textarea__inner{
                        height: 70px;
                        resize: none;
                    }
                }
            }
            .massageleft{
                width: 520px;
                .datainput{
                    // display: flex;
                    ::v-deep .el-form-item__label{
                        width: 120px !important;
                    }
                    ::v-deep .el-form-item__content{
                        margin-left: 120px !important;
                    }
                    .startdata{
                        width: 180px;
                        ::v-deep .el-form-item__content{
                            margin-left: 0 !important;
                        }
                    }
                    .line{
                        width: 40px;
                        text-align: center;
                    }
                }
                .commoninput{
                    ::v-deep .el-form-item__label{
                        width: 120px !important;
                    }
                    ::v-deep .el-form-item__content{
                        margin-left: 120px !important;
                    }
                    ::v-deep .el-input__inner{
                        width: 400px;
                        height: 40px;
                    }
                    ::v-deep .el-upload--picture-card{
                        width: 100px;
                        height: 100px;
                        line-height: 100px;
                    }
                    ::v-deep .el-upload--picture-card:hover{
                        border-color: #1abc9c;
                    }
                    ::v-deep .el-upload--picture-card:hover i{
                        color: #1abc9c !important;
                    }
                    ::v-deep .el-textarea__inner{
                        height: 118px;
                        resize: none;
                    }
                }
            }
        }
        .buttonbox{
            width: 100%;
            height: 100px;
            border-top: 1px solid rgb(242, 242, 242);
            display: flex;
            justify-content: center;
            align-items: center;
            ::v-deep .el-form-item{
                margin-bottom: 0;
            }
            ::v-deep .el-form-item__content{
                margin-left: 0 !important;
            }
            .savebutton,.reasetbutton{
                width: 140px;
                height: 40px;
                cursor: pointer;
            }
            .savebutton{
                background-color: #0079fe;
            }
            .reasetbutton{
                border-color: #0079fe;
                color: #0079fe;
                margin-left: 20px;
            }
            .savebutton:hover{
                background-color: #3394fe !important;
                color: #fff !important;
            }
            .reasetbutton:hover{
                border-color: #3394fe !important;
                color: #3394fe !important;
                background-color: #fff !important;
            }
        }
    }
</style>